<template>
	<view class="buyout">
		<view class="tips-title">买断尾款说明</view>
		
		<view class="tips-item" style="margin-top: 10px;">
			1.到期买断尾款：系指订单在原租期（不含续租）到期时买断商品所需付的金额；
		</view>
		
		<view class="tips-item" style="margin: 20px 0;">
			2.当期买断尾款=当期买断价-实付租金，详细价格信息看下表，如订单有冻结押金，冻结押金可抵扣买断尾款；
		</view>
		
		<view>
		    <table>
		      <tr class="flex">
		        <th style="line-height: 50px;">租期</th>
		        <th style="line-height: 50px;">买断价</th>
		        <th style="line-height: 50px;">买断尾款</th>
		      </tr>
		      <tr v-for='(item,index) in bill' :key="index" class="flex">
		        <td>
					<view style="font-size: 1em;font-weight: bold;padding-bottom: 5px;">第{{item.currentLeaseTerm}}期</view>
					<view>{{item.tenancy}}</view>
				</td>
		        <td style="line-height: 50px;">{{item.buyoutPayment}}</td>
		        <td style="line-height: 50px;">{{item.buyoutRetainPayment}}</td>
		      </tr>
		    </table>
		  </view>
		
	</view>
</template>

<script>
	import {getBuyOutBill} from '@/api/product.js';
	export default{
		data(){
			return{
				bill:[]
			}
		},
		methods:{
			
		},
		onLoad:function(options){
			getBuyOutBill(options.id)
			.then(res=>{
				this.bill = res.data.rentalPlanResponseList;
				
					console.log(this.bill,'买断')
			})
		}
	}
</script>

<style scoped lang="scss">
	.buyout{
		padding: 20px;
		.tips-title{
			font-weight: bold;
			font-size: 1em;
		}
		.tips-item{
			font-size: 1em;
		}
		.flex{
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		table {
		  width: 100%;
		  border-collapse: collapse;
		}
		 
		th, td {
		  border: 1px solid #ddd;
		  padding: 8px;
		  height: 60px;
		  width: calc(100% / 3);
		}
		 
		th {
		  background-color: #f2f2f2;
		}
	}
</style>